import React, {memo} from 'react';
import {headerLinks} from "@/common/local-data";

import {NavLink} from "react-router-dom";
//app页面的整个头部标签
import {
  HeaderWrapper,
  AppHeaderLeft,
  AppHeaderRight
} from './style';

export default memo(function AppHeader() {

    return (
        <HeaderWrapper>
          <div className="content">
            <AppHeaderLeft>
              <a className="logo" href="#/discover"> </a>
              {
                headerLinks.map((item,index)=>{
                  if (index<3){
                    return <NavLink key={item.title} className="navlink" to={item.link}>{item.title}</NavLink>
                  }else{
                    return <a key={item.title} className="navlink" href={item.link}>{item.title}</a>
                  }
                })
              }

            </AppHeaderLeft>

            {/*头部导航栏中的搜索框*/}
            <AppHeaderRight>
              <div className="homeHead_search">
                <div className="homeHead_search_logo"/>
                <input type="text" className="srch"
                   placeholder="音乐/视频/电台/用户" autoComplete="off"/>
              </div>
              <div className="homeHead_chuangzuo">
                创作者中心
              </div>
              <div className="homeHead_login">
                <a href="#/discover">登录</a>
              </div>
            </AppHeaderRight>

          </div>

          {/*底部红色的线*/}
          <div className="divider"/>

        </HeaderWrapper>
    );
  }
)
